<template>
  <view class="">
    <view class="box" v-for="(item, index) in list" :key="index">
      <view class="box_top">
        <view class="box_top_left">订单号：25029198032</view>
        <view class="box_top_right">已完成</view>
      </view>
      <!-- 图片位置 -->
      <view class="picture">
        <view class="" style="margin-right: 50rpx;"><image src="/static/lzl/img-home-cp2@2x.png" style="width: 200rpx;height: 200rpx;" mode=""></image></view>
        <view class="" style="margin-right: 80rpx;width: 350rpx;">
          <view class="picture_top">单面亚麻被单 | 天蓝色</view>
          <view class="picture_top_t">150*200-dsvdsvdsvdsv单人被单 Coverlet</view>
          <view class="picture_bottom_b">藕粉色</view>
          <view class="picture_bottom">￥2800.00</view>
        </view>
        <!--  -->
        <view class="num">×16</view>
      </view>
      <!-- 下方的 -->
      <view class="freight" style="text-align: right;margin-top: 40rpx;color: #999999;font-size: 28rpx;">
        运费:包邮
        <text style="color: #0A0A09;font-size: 28rpx;margin-left: 30rpx;">付款金额:￥2000.00</text>
      </view>
      <!-- 按钮 -->
      <view class="btn">
        <!-- 左边的 -->
        <view class="left">取消订单</view>
        <!-- 右边的 -->
        <view class="right">查看详情</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['num'],
  data() {
    return {
      list: []
    };
  },
  onShow() {
    this.init();
  },
  onReachBottom() {
    this.init();
  },
  methods: {
    async init() {
      let n = await this.$api.orderIndex({ type: 'all', page: 1 });
      this.list = n.data.data;
    }
  },
  onLoad() {
    console.log(this.num);
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  // background-color: #f2f1f1;
}
.btn {
  position: relative;
  // text-align: right;
  margin-top: 40rpx;
  // display: flex;
  .left {
    position: absolute;
    right: 230rpx;
    top: 0rpx;
    width: 192rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border: 2rpx solid #adadaa;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #adadaa;
  }
  .right {
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 192rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border: 2rpx solid #296d8a;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #296d8a;
  }
}
.box {
  padding: 20rpx;
  // width: 700rpx;
  height: 552rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  .box_top {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    .box_top_left {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
    .box_top_right {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
  }
  .picture {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f2f1f1;
    .picture_top {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #0a0a09;
    }
    .picture_top_t {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin-top: 20rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
    .picture_bottom_b {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin-top: 20rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
    .picture_bottom {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin-top: 20rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #e83241;
    }
    .num {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #cccccc;
    }
  }
}
</style>
